<!DOCTYPE html>
<html>
<head>
    <meta name="color-scheme" content="dark light">
    <title>Inspector</title>

    <style type="text/css">@INSPECTOR_STYLE@</style>
    <link href="@INSPECTOR_CSS@" rel="stylesheet" />
</head>
<body>
    <div class="split-view">
        <div id="inspector-top" class="split-view-container" style="height: 60%">
            <div class="tab-controls-container">
                <div class="global-controls"></div>

                <div class="tab-controls">
                    <button id="dom-tree-button" onclick="selectTopTab(this, 'dom-tree')">DOM Tree</button>
                    <button id="accessibility-tree-button" onclick="selectTopTab(this, 'accessibility-tree')">Accessibility Tree</button>
                    <button id="storage-button" onclick="selectTopTab(this, 'storage')">Storage</button>
                    <button id="style-sheets-button" onclick="selectTopTab(this, 'style-sheets')">Style Sheets</button>
                </div>

                <div class="global-controls">
                    <button id="export-inspector-button" title="Export the Inspector to an HTML file" onclick="inspector.exportInspector()"></button>
                </div>
            </div>

            <div id="dom-tree" class="tab-content html"></div>
            <div id="accessibility-tree" class="tab-content"></div>

            <div id="storage" class="tab-content" style="padding: 0">
                <div class="tab-header">
                    <select id="storage-picker">
                        <option value="cookies" selected>Cookies</option>
                    </select>
                </div>

                <div id="cookie-storage">
                    <table class="property-table">
                        <thead>
                            <tr>
                                <th style="width: 10%">Name</th>
                                <th style="width: 15%">Value</th>
                                <th style="width: 10%">Domain</th>
                                <th style="width: 5%">Path</th>
                                <th style="width: 20%">Created</th>
                                <th style="width: 20%">Last Accessed</th>
                                <th style="width: 20%">Expires</th>
                            </tr>
                        </thead>
                        <tbody id="cookie-table">
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="style-sheets" class="tab-content" style="padding: 0">
                <div class="tab-header">
                    <select id="style-sheet-picker" disabled onchange="loadStyleSheet()">
                        <option value="." selected>No style sheets found</option>
                    </select>
                </div>

                <div id="style-sheet-source"></div>
            </div>
        </div>

        <div id="inspector-separator" class="split-view-separator">
            <svg viewBox="0 0 16 5" xmlns="http://www.w3.org/2000/svg">
                <circle cx="2" cy="2.5" r="2" />
                <circle cx="8" cy="2.5" r="2" />
                <circle cx="14" cy="2.5" r="2" />
            </svg>
        </div>

        <div id="inspector-bottom" class="split-view-container" style="height: calc(40% - 5px)">
            <div class="tab-controls-container">
                <div class="global-controls"></div>

                <div class="tab-controls">
                    <button id="console-button" onclick="selectBottomTab(this, 'console')">Console</button>
                    <button id="computed-style-button" onclick="selectBottomTab(this, 'computed-style')">Computed Style</button>
                    <button id="resolved-style-button" onclick="selectBottomTab(this, 'resolved-style')">Resolved Style</button>
                    <button id="custom-properties-button" onclick="selectBottomTab(this, 'custom-properties')">Custom Properties</button>
                    <button id="font-button" onclick="selectBottomTab(this, 'fonts')">Fonts</button>
                </div>

                <div class="global-controls"></div>
            </div>

            <div id="console" class="tab-content">
                <div class="console">
                    <div id="console-output" class="console-output"></div>
                    <div class="console-input">
                        <label for="console-input" class="console-prompt">&gt;&gt;</label>
                        <input id="console-input" type="text" placeholder="Enter statement to execute">
                        <button id="console-clear" title="Clear the console output" onclick="inspector.clearConsoleOutput()">X</button>
                    </div>
                </div>
            </div>

            @COMPUTED_STYLE@
            @RESOVLED_STYLE@
            @CUSTOM_PROPERTIES@

            <div id="fonts" class="tab-content">
                <div id="fonts-list"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="@INSPECTOR_JS@"></script>
</body>
</html>
